import { Badge, Button, FixedView } from "@taroify/core";
import { Input, Textarea, View } from "@tarojs/components";
import {
  SmileOutlined,
  PhotoOutlined,
  SmileCommentOutlined,
  GoodJobOutlined,
  StarOutlined,
} from "@taroify/icons";
import { useEffect, useRef, useState } from "react";
import FileTools from "./FileTools";

interface SendToolsProps {
  type?: "comment" | "message";
}

export default ({ type = "message" }: SendToolsProps) => {
  const [show, setShow] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null); // 创建 textarea 的 ref
  useEffect(() => {
    if (show && textareaRef.current) {
      textareaRef.current.focus();
    }
  }, [show]);
  return (
    <FixedView position="bottom" className="bg-white">
      {show ? (
        <View className="pb-3">
          <View className="fixed inset-0" onClick={() => setShow(false)}></View>
          <View className="flex items-end gap-4 p-2">
            <Textarea
              ref={textareaRef}
              placeholder="友谊第二，文明第一"
              className="bg-[#F7F7F9]  p-4 w-11/12 rounded-lg text-xs"
              placeholderClass="text-xs text-gray-400"
              maxlength={800}
            />
            <Button
              className="w-12 flex-shrink-0"
              size="mini"
              variant="contained"
              color="primary"
              shape="round"
            >
              发送
            </Button>
          </View>
          <FileTools />
        </View>
      ) : (
        <View className="px-4 py-2 flex items-center gap-2">
          <View className="bg-[#F7F7F9] text-xs px-4 py-1 rounded-full flex-1">
            <Input placeholder="输入新消息" onFocus={() => setShow(true)} />
          </View>
          {type === "comment" ? (
            <>
              <Badge content="9">
                <SmileCommentOutlined size={24} />
              </Badge>
              <Badge content="9">
                <GoodJobOutlined size={24} />
              </Badge>
              <StarOutlined size={24} />
            </>
          ) : (
            <>
              <SmileOutlined size={24} onClick={() => setShow(true)} />
              <PhotoOutlined size={24} />
            </>
          )}
        </View>
      )}
    </FixedView>
  );
};
